<template>
  <view class="chat-container">
    <view class="chat-header">
      <image class="back-icon" src="/static/image/back.png" @click="goBack"></image>
      <text class="header-title">AI 助手</text>
    </view>
    
    <scroll-view class="chat-messages" scroll-y="true">
      <view v-for="(message, index) in messages" :key="index" class="message" :class="message.sender">
        {{ message.content }}
      </view>
    </scroll-view>
    
    <view class="chat-input-area">
      <input class="chat-input" v-model="inputMessage" placeholder="输入消息..." />
      <button class="send-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      eventSource: null
    }
  },
  onLoad() {
    this.connectSSE();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    connectSSE() {
      const url = 'https://api4xyz.xndpy.com/api4xyz/ai/stream/session_ccjtua2eg';
      this.eventSource = new EventSource(url);
      
      this.eventSource.addEventListener('connect', (event) => {
        const data = JSON.parse(event.data);
        this.messages.push({
          sender: 'system',
          content: data.content
        });
      });
      
      this.eventSource.addEventListener('message', (event) => {
        const data = JSON.parse(event.data);
        this.messages.push({
          sender: 'ai',
          content: data.content
        });
      });
      
      this.eventSource.addEventListener('complete', (event) => {
        const data = JSON.parse(event.data);
        this.messages.push({
          sender: 'system',
          content: data.content
        });
      });
      
      this.eventSource.onerror = (error) => {
        console.error('EventSource error:', error);
        this.eventSource.close();
      };
    },
    sendMessage() {
      if (this.inputMessage.trim() === '') return;
      
      // Add user message
      this.messages.push({
        sender: 'user',
        content: this.inputMessage
      });
      
      // Send to server
      const url = 'https://api4xyz.xndpy.com/api4xyz/ai/send';
      const data = {
        memoryId: "",
        message: this.inputMessage,
        sessionId: "session_ccjtua2eg",
        user: "用户"
      };
      
      uni.request({
        url: url,
        method: 'POST',
        data: data,
        success: () => {
          this.inputMessage = '';
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: '发送失败',
            icon: 'none'
          });
        }
      });
    }
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  padding: 20rpx;
  overflow: auto;
}

.message {
  margin-bottom: 20rpx;
  padding: 15rpx;
  border-radius: 10rpx;
}

.message.user {
  background-color: #e6f7ff;
  text-align: right;
}

.message.system, .message.ai {
  background-color: #f0f0f0;
  text-align: left;
}

.chat-input-area {
  display: flex;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
}

.chat-input {
  flex: 1;
  padding: 10rpx 15rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.send-button {
  padding: 10rpx 20rpx;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 10rpx;
}
</style>
